<template>
  <el-card>
    <div class="container">
      <el-card class="left">
        <div slot="header" class="title">
          选择机构
        </div>
        <ul>
          <template v-for="orgItem in orgList">
            <li
              :key="orgItem.key"
              :class="{on: orgItem.key === currentOrgId}"
              @click="()=>{handleOrgChange(orgItem.key)}"
            >
              {{ orgItem.value }}
            </li>
          </template>
        </ul>
      </el-card>
      <el-card class="right">
        <div slot="header" class="title">
          规则配置
        </div>
        <el-form v-model="ruleList" size="small" label-position="right">
          <template v-for="(rule, index) in violateRuleMap">
            <el-form-item :key="rule.key" :label="rule.value + '：'" label-width="110px">
              <div v-if="rule.key === 1" class="form-value">
                <span>
                  <el-input v-model="ruleList[index].value1" class="inline-input" />
                  <span>米内停留</span>
                  <el-input v-model="ruleList[index].value2" class="inline-input" />
                  <span>分钟进行警告</span>
                </span>
                <el-switch v-model="ruleList[index].enabled" active-text="开启" />
              </div>

              <div v-if="rule.key === 2" class="form-value">
                <span>
                  <el-input v-model="ruleList[index].value1" class="inline-input" />
                  <span>分钟无法获取定位警告</span>
                </span>
                <el-switch v-model="ruleList[index].enabled" active-text="开启" />
              </div>

              <div v-if="rule.key === 3" class="form-value">
                <span>
                  <el-input v-model="ruleList[index].value1" class="inline-input" />
                  <span>分钟处于工作区外进行告警</span>
                </span>
                <el-switch v-model="ruleList[index].enabled" active-text="开启" />
              </div>

              <div v-if="rule.key === 4" class="form-value">
                <span>
                  <el-input v-model="ruleList[index].value1" class="inline-input" />
                  <span>人及以上,聚集</span>
                  <el-input v-model="ruleList[index].value2" class="inline-input" />
                  <span>米以内持续</span>
                  <el-input v-model="ruleList[index].value3" class="inline-input" />
                  <span>分钟进行告警</span>
                </span>
                <el-switch v-model="ruleList[index].enabled" active-text="开启" />
              </div>

              <div v-if="rule.key === 5" class="form-value">
                <span>
                  <span>车速超过</span>
                  <el-input v-model="ruleList[index].value1" class="inline-input" />
                  <span>公里/小时进行告警</span>
                </span>
                <el-switch v-model="ruleList[index].enabled" active-text="开启" />
              </div>

              <div v-if="rule.key === 6" class="form-value">
                <span>
                  <el-input v-model="ruleList[index].value1" class="inline-input" />
                  <span>米内停留</span>
                  <el-input v-model="ruleList[index].value2" class="inline-input" />
                  <span>分钟进行警告</span>
                </span>
                <el-switch v-model="ruleList[index].enabled" active-text="开启" />
              </div>
            </el-form-item>
          </template>
          <el-form-item label-width="110px">
            <el-button type="primary" :disabled="currentOrgId === 0" @click="handleSubmit">
              保存
            </el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
  </el-card>
</template>

<script>
import { violateRuleMap } from '@/config/dict'
import { fetchViolateDefineGet, fetchViolateDefineSet } from '@/api/sanitation/violateDefine'
import { fetchDropOrgAllList } from '@/api/common/commonDropDown'

export default {
  data: function() {
    return {
      currentOrgId: 0,
      orgList: [],
      violateRuleMap,
      ruleList: []
    }
  },
  watch: {
    violateRuleMap: {
      handler: function(val) {
        this.$data.ruleList = violateRuleMap.map(e => ({ ruleId: e.key, name: e.value }))
      },
      immediate: true
    }
  },
  created() {
    this.postOrgAllList().then(() => {
      if (this.$data.orgList.length > 0) {
        this.$data.currentOrgId = this.$data.orgList[0].key
        this.postViolateGet()
      }
    })
  },
  methods: {
    postOrgAllList() {
      return fetchDropOrgAllList().then(res => {
        this.$data.orgList = res.map(e => ({ key: e.id, value: e.orgName }))
      })
    },
    postViolateGet() {
      const params = { orgId: this.$data.currentOrgId }
      fetchViolateDefineGet(params).then(res => {
        if (res && res.length > 0) {
          this.$data.ruleList = res
        } else {
          this.$data.ruleList = violateRuleMap.map(e => ({ ruleId: e.key, name: e.value }))
        }
      })
    },
    postViolateSet() {
      const params = this.$data.ruleList.map(e => {
        e.enabled = !!e.enabled
        e.orgId = this.$data.currentOrgId
        return e
      })
      if (!this.checkFormData(params)) {
        this.$message.warning('所有规则不能为空')
        return
      }
      fetchViolateDefineSet(params).then(res => {
        this.$message.success('保存成功')
      })
    },
    checkFormData(formData) {
      let result = true
      formData.forEach(e => {
        Object.values(e).forEach(ee => {
          if (ee === undefined || ee === '') {
            result = false
          }
        })
      })
      return result
    },
    handleOrgChange(_orgId) {
      if (this.$data.currentOrgId === _orgId) {
        return
      }
      this.$data.currentOrgId = _orgId
      this.postViolateGet()
    },
    handleSubmit() {
      this.postViolateSet()
    }
  }
}
</script>

<style lang="scss" scoped>
.header {
  display: flex;
  height: 30px;
  border-bottom: 1px solid #eee;
.left{
  width: 200px;
}
}
  .container {
    display: flex;
    .left {
      width: 200px;

      ul{
        list-style: none;
        padding: 0;
        max-height: 500px;
        height: 100%;
        overflow-y: auto;
        margin: 0;

        &::-webkit-scrollbar{
          display: none;
        }

      }
      li {
        height: 45px;
        line-height: 45px;
        padding-left: 10px;
        cursor: pointer;
        &:hover{
          color: #409EFF;
        }
        &.on{
          color: #409EFF;
        }
      }

    }
    .right {

      .form-value {
        width: 560px;
        white-space: nowrap;
        display: flex;
        justify-content: space-between;
        color: #888;

       .inline-input {
         width: 60px;
         text-align: center;
       }

      }
    }
  }
</style>
